<template>
    <div>
        <P>{{ counter }}</P>
        <P>
            <button @click="handleReset">重置</button>
            <button @click="handlePause">暂停</button>
            <button @click="handleResume">重新开始</button>
        </P>
    </div>
</template>

<script setup>
import { useInterval } from '@vueuse/core'

const { counter, reset, pause, resume } = useInterval(200, { controls: true });


const handleReset = () => {
    reset();
};

const handlePause = () => {
    pause();
};

const handleStart = () => {
    start();
};

const handleResume = () => {
    resume();
};

</script>

<style lang="scss" scoped>

</style>